import PageCommon from "@/components/PageCommon";

import { delete_device, get_device_list } from "@/services/device";
import { device_type_map, power_type_map } from "@/utils/enum";
import { PlusOutlined } from "@ant-design/icons";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { history } from "@umijs/max";
import { Button, message, Popconfirm, Space } from "antd";
import dayjs from "dayjs";
import { useRef } from "react";
import styled from "styled-components";

const DeviceImg = styled.img`
  width: 100px;
`;

const UseDeviceList = () => {
  const actionRef = useRef<ActionType>();
  const [messageApi, contextHolder] = message.useMessage();

  const columns: ProColumns<any>[] = [
    {
      title: "ID",
      dataIndex: "id",
      fixed: "left"
    },
    {
      title: "Name",
      dataIndex: "name",
      fixed: "left"
    },
    {
      title: "Model",
      dataIndex: "model"
    },
    {
      title: "DeviceType",
      dataIndex: "device_type",
      valueEnum: device_type_map
    },
    {
      title: "PowerType",
      dataIndex: "power_type",
      hideInSearch: true,
      valueEnum: power_type_map
    },
    {
      title: "powerValue",
      dataIndex: "power_value",
      hideInSearch: true
    },
    {
      title: "Price",
      dataIndex: "price",
      hideInSearch: true
    },
    {
      title: "DeviceImg",
      dataIndex: "device_img",
      hideInSearch: true,
      render: (_, record) => {
        return <>{record.device_img ? <DeviceImg src={record.device_img}></DeviceImg> : "-"}</>;
      }
    },

    {
      title: "Renark",
      dataIndex: "remark",
      hideInSearch: true
    },
    {
      title: "CreatedAt",
      dataIndex: "created_at",
      hideInSearch: true,
      width: 200,
      render: (_, record) => {
        return <span>{dayjs(record.created_at).format("YYYY-MM-DD HH:mm:ss")}</span>;
      }
    },
    {
      title: "UpdatedAt",
      dataIndex: "updated_at",
      hideInSearch: true,
      width: 200,
      render: (_, record) => {
        return <span>{dayjs(record.updated_at).format("YYYY-MM-DD HH:mm:ss")}</span>;
      }
    },
    {
      title: "Operation",
      dataIndex: "filter",
      hideInSearch: true,
      width: 100,
      fixed: "right",
      render: (_, record) => {
        return (
          <Space>
            <Button size="small" onClick={() => history.push(`/device/addedit/${record.id}`)}>
              Edit
            </Button>

            <Popconfirm
              title="Are you sure you want to delete it?"
              onConfirm={async () => {
                let res = await delete_device(record.id);
                if (res.code === 0) {
                  messageApi.success("ok!");
                  actionRef.current?.reload();
                }
              }}
            >
              <Button type="primary" danger size="small">
                Delete
              </Button>
            </Popconfirm>
          </Space>
        );
      }
    }
  ];

  return (
    <PageCommon>
      {contextHolder}
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={async ({ current, pageSize, ...search }) => {
          let params = {
            page: current,
            page_size: pageSize,
            ...search
          };
          let resp = await get_device_list(params);
          return {
            total: resp.data.total,
            success: resp.code === 0,
            data: resp.data.list
          };
        }}
        columns={columns}
        toolbar={{
          settings: []
        }}
        scroll={{ x: 1600 }}
        headerTitle={[
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              history.push(`/device/addedit/new`);
            }}
          >
            <PlusOutlined /> New Device
          </Button>
        ]}
      />
    </PageCommon>
  );
};

export default UseDeviceList;
